<template>
  <div class="vehicle-container">
    <!-- 搜索区域 -->
    <div class="search-area">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="车型">
          <el-input v-model="searchForm.model" placeholder="请输入车型" clearable></el-input>
        </el-form-item>
        <el-form-item label="颜色">
          <el-input v-model="searchForm.color" placeholder="请输入颜色" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button type="success" @click="handleAdd">新增车辆</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据表格 -->
    <el-table :data="vehicleList" border style="width: 100%">
      <el-table-column prop="model" label="车型" width="180"></el-table-column>
      <el-table-column prop="color" label="颜色" width="120"></el-table-column>
      <el-table-column prop="configuration" label="配置"></el-table-column>
      <el-table-column prop="stock_quantity" label="库存数量" width="120">
        <template slot-scope="{row}">
          <span :class="{'warning-text': isLowStock(row)}">{{ row.stock_quantity }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="warning_threshold" label="预警阈值" width="120"></el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="{row}">
          <el-button type="text" @click="handleEdit(row)">编辑</el-button>
          <el-button type="text" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
      <el-form :model="currentVehicle" label-width="100px">
        <el-form-item label="车型" required>
          <el-input v-model="currentVehicle.model"></el-input>
        </el-form-item>
        <el-form-item label="颜色">
          <el-input v-model="currentVehicle.color"></el-input>
        </el-form-item>
        <el-form-item label="配置">
          <el-input type="textarea" v-model="currentVehicle.configuration"></el-input>
        </el-form-item>
        <el-form-item label="库存数量">
          <el-input-number v-model="currentVehicle.stock_quantity" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="预警阈值">
          <el-input-number v-model="currentVehicle.warning_threshold" :min="0"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSave">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getVehicleList, addVehicle, updateVehicle, deleteVehicle } from '@/api/car/vehicle'

export default {
  name: 'CarList',
  data() {
    return {
      // 搜索表单
      searchForm: {
        model: '',
        color: ''
      },
      // 车辆列表数据
      vehicleList: [],
      // 弹窗显示控制
      dialogVisible: false,
      // 弹窗标题
      dialogTitle: '',
      // 当前编辑的车辆信息
      currentVehicle: {
        model: '',
        color: '',
        configuration: '',
        stock_quantity: 0,
        warning_threshold: 0
      }
    }
  },
  created() {
    // 页面创建时加载数据
    this.fetchVehicleList()
    // 启动库存检查
    this.checkLowStock()
  },
  methods: {
    // 获取车辆列表
    async fetchVehicleList() {
      try {
        const res = await getVehicleList(this.searchForm)
        if (res.code === 1) {
          this.vehicleList = res.data
          this.checkLowStock()
        }
      } catch (error) {
        this.$message.error('获取车辆列表失败')
      }
    },

    // 检查低库存并提醒
    checkLowStock() {
      const lowStockVehicles = this.vehicleList.filter(item =>
        item.stock_quantity <= item.warning_threshold
      )
      if (lowStockVehicles.length > 0) {
        this.$notify.warning({
          title: '库存预警',
          message: `有${lowStockVehicles.length}个车型库存不足`,
          duration: 0
        })
      }
    },

    // 判断是否为低库存
    isLowStock(row) {
      return row.stock_quantity <= row.warning_threshold
    },

    // 搜索处理
    handleSearch() {
      this.fetchVehicleList()
    },

    // 新增车辆
    handleAdd() {
      this.dialogTitle = '新增车辆'
      this.currentVehicle = {
        model: '',
        color: '',
        configuration: '',
        stock_quantity: 0,
        warning_threshold: 0
      }
      this.dialogVisible = true
    },

    // 编辑车辆
    handleEdit(row) {
      this.dialogTitle = '编辑车辆'
      this.currentVehicle = { ...row }
      this.dialogVisible = true
    },

    // 保存车辆信息
    async handleSave() {
      try {
        const isEdit = !!this.currentVehicle.id
        const res = isEdit
          ? await updateVehicle(this.currentVehicle)
          : await addVehicle(this.currentVehicle)

        if (res.code === 1) {
          this.$message.success(isEdit ? '更新成功' : '添加成功')
          this.dialogVisible = false
          this.fetchVehicleList()
        }
      } catch (error) {
        this.$message.error('操作失败')
      }
    },

    // 删除车辆
    async handleDelete(row) {
      try {
        await this.$confirm('确认删除该车辆信息？', '提示', {
          type: 'warning'
        })
        let data = {id:row.id};
        const res = await deleteVehicle(data)
        if (res.code === 1) {
          this.$message.success('删除成功')
          this.fetchVehicleList()
        }
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error('删除失败')
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.vehicle-container {
  padding: 20px;

  .search-area {
    margin-bottom: 20px;
  }

  .warning-text {
    color: #f56c6c;
    font-weight: bold;
  }
}
</style>
